<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Typography</title>
<link href="main.css" rel="stylesheet">
<style>
a {
  color: #207EBF;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px solid #F60;
}
a:visited {
 color: #6E97BF;
}
a:hover {
  color: #FFF;
  background-color: #6E97BF;
  border-bottom-color: #6E97BF;
}
a[href^="mailto:"] {
  color: #666666;
  border: none;
  background: url(images/email.gif) no-repeat left center;
  padding-left: 20px;
  margin-left: 10px;
}
.resources a {
  border-bottom: none;
  padding-right: 22px;
}
.resources a[href*='://'] {
  background: url(images/globe.png) no-repeat right top;
}
.resources a[href$='.pdf'] {
  background: url(images/acrobat.png) no-repeat right top;
}
.resources a[href$='.zip'] {
  background: url(images/zip.png) no-repeat right top;
}
.resources a[href$='.doc'] {
  background: url(images/word.png) no-repeat right top;
}
.resources a:hover {
  color: #000;
  background-color: rgba(255,255,255,.8);
}
</style>	
</head>

<body>
<div class="main">
<h1><strong>CSS</strong> The Missing Manual</h1>
<h2>Exploring Typographic Possibilities</h2>
<p class="byline">november 30 <strong>Rod Dibble</strong></p>
<div class="resources">
<h3> Resources</h3>
<ul>
  <li><a href="report.pdf">Annual Report</a></li>
  <li><a href="template.doc">Corporate Word Template</a></li>
  <li><a href="logos.zip">Corporate Graphics</a></li>
  <li><a href="https://www.yahoo.com/">Parent Corporate Site</a></li>
  <li><a href="https://www.google.com/">More Links</a></li>
</ul>
</div>
<h3>Esse quam nulla</h3>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <a href="test.html">Quis autem vel eum</a> iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi <a href="test2.html">ut aliquid ex ea commodi</a> consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h3>Quis autem vel eum</h3>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illu <a href="test3.html">qui dolorem eum</a> fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p class="legal">Copyright 2015 <a href="mailto:css@cosmofarmer.com">E-mail comments to css@cosmofarmer.com</a></p>
</div>
</body>
</html>
